<template>
    <div class="swiper-container" id="swiperIndex">
        <div class="swiper-wrapper" style="height: 300px">
            <div class="swiper-slide" v-for="(item,index) in banners" :key="index">
                <img :src="item" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</template>
<script>
import "swiper/css/swiper.css";
import Swiper from 'swiper'
export default {
    name: "SwiperArea",
    props:{
        banners:{
            type:Array,
            default:function (){
                return []
            }
        }
    },
    watch:{
        banners:{
            immediate:true,
            handler(){
                this.$nextTick(
                    function (){
                        new Swiper(".swiper-container",{
                            loop:true,
                            mousewheel:true,
                            keyboard:true,
                            autoplay:{},
                            pagination:{
                                el:".swiper-pagination",
                                clickable:true
                            },
                        })
                    }
                )
            }
        }
    }
    }
</script>

<style scoped>
img{
    width: 100%;
    /*height: 300px;*/
}
</style>
